import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
let renderer, scene, camera, controls
let uniforms
let clock = new THREE.Clock()

let vextureShader = `
    varying vec2 vUv;
    varying vec3 fNormal;
    varying vec3 vPosition;
    void main()
    {
    vUv = uv;
    fNormal=normal;
    vPosition=position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
`

let fragmentShader = `
    varying vec2 vUv;
    uniform float iTime;
    uniform sampler2D colorTexture;
    vec3 hsb2rgb(const vec3 c) {
    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0, 4.0, 2.0), 6.0)-3.0)-1.0, 0.0, 1.0);
    rgb = rgb*rgb*(3.0-2.0*rgb);
    return c.z * mix( vec3(1.0), rgb, c.y);
    }
    void main() {
    vec2 uv = vUv;
    vec2 p = 2.0*uv.xy - vec2(1., 1.) ; // center what being drawn
    float r = length(p) * 2.; //圈数量
    vec3 color = hsb2rgb(vec3(0.4, 1., 1.)); //0.24, 0.7, 0.5
    vec4 textureValue = texture2D( colorTexture, vUv );
    float a = pow(r, 2.0); //圈数量
    float b = sin(r * 0.8 - 1.6);
    float c = sin(r - .10);
    float s = sin(a - iTime * 3.0 + b) * c;
    color *= abs(1.0 / (s * 30.)) - 0.1; //初始圈大小
    gl_FragColor = vec4(color, 1.);
    }
`

function init() {
    initRenderer()
    initScene()
    initCamera()
    initControls()
    initLights()
    initHelp()
    initFloor()
    animate()
}

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(document.getElementById('webgl-output').clientWidth, document.getElementById('webgl-output').clientHeight)
    document.getElementById('webgl-output').appendChild(renderer.domElement)
}

function initScene() {
    scene = new THREE.Scene()
}

function initLights() {
    scene.add(new THREE.AmbientLight(0x7af4ff, 1.2))
    let directionalLight1 = new THREE.DirectionalLight(0x7af4ff, 1) //037af1
    directionalLight1.position.set(-100, 10, -100)
    let directionalLight2 = new THREE.DirectionalLight(0x7af4ff, 1)
    directionalLight2.position.set(100, 10, 100)
    scene.add(directionalLight1)
    scene.add(directionalLight2)
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, document.getElementById('webgl-output').clientWidth / document.getElementById('webgl-output').clientHeight, 0.1, 1000)
    camera.position.set(100, 100, 100);
    camera.lookAt(scene.position)
}

function initHelp() {
    let axes = new THREE.AxesHelper(1000)
    scene.add(axes)
}

function initControls() {
    controls = new OrbitControls(camera, renderer.domElement)
}

function initFloor() {
    //扩散波效果
    const geometry = new THREE.CircleGeometry(100, 64);
    uniforms = {
        iTime: { value: 0.1 },
    };
    var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vextureShader,
        fragmentShader: fragmentShader,
        side: THREE.DoubleSide,
        blending: THREE.AdditiveBlending,
        transparent: true,
        opacity: 1
    })
    let plane2 = new THREE.Mesh(geometry, material);
    plane2.rotateX(-Math.PI / 2)
    plane2.position.y = -0.015
    scene.add(plane2);
}

function animate() {
    const timer = clock.getDelta();
    uniforms.iTime.value += Math.sin(timer) / 3;
    if (uniforms.iTime.value > 1.0) {
        uniforms.iTime.value = 0.0;
    }
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
}

export default {
    init
}